<template>
    <div class="invite">
        <nav-list :clickIndex="clickIndex"></nav-list>
        <div class="middle-invite">
            <div class="date-picker" style="padding-right: 30px">
                <el-date-picker
                    v-model="selectDate"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    @change="getuseractivedata"
                    :picker-options="pickerOptions"
                    size="small"
                >
                </el-date-picker>
            </div>
            <div
                id="lineVip"
                v-loading="loading"
                element-loading-text="加载中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.1)"
                style="
                    width: 96vw;
                    height: 80vh;
                    display: inline-block;
                    margin: 0 auto;
                "
            ></div>
        </div>
    </div>
</template>
<script>
import navList from "@/components/navList/navList.vue";
import {getuseractivedata,} from "@/api/inviteIndex/inviteIndex";
import "echarts/extension/bmap/bmap";


export default {
    name: "mediaAnalysis",
    components: {
        navList
    },
    data() {
        return {
            selectDate: "",
            // 日期时间范围在一个月以内
            pickerOptions: {
                onPick: ({maxDate, minDate}) => {
                    this.selectDate = minDate.getTime();
                    if (minDate && !maxDate) {
                        this.timeOptionRange = minDate;
                    }
                    if (maxDate) {
                        this.selectDate = "";
                        this.timeOptionRange = null;
                    }
                },
                disabledDate: (time) => {
                    let timeOptionRange = this.timeOptionRange;
                    if (
                        timeOptionRange &&
                        time.getTime() === timeOptionRange.getTime()
                    )
                        return true;
                    if (this.selectDate !== "") {
                        const one = 30 * 24 * 3600 * 1000;
                        const minTime = this.selectDate - one;
                        const maxTime = this.selectDate + one;
                        return (
                            time.getTime() < minTime || time.getTime() > maxTime
                        );
                    }
                },
            },
            clickIndex: 7,
            loading: true,
            dataType: "",
            scrollView: false,
            lineOpiton: {
                title: {
                    text: "",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["PC", "App", "小程序"],
                    textStyle: {
                        color: "#fff",
                    },
                    left: "3%"
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },

                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                series: [
                    {
                        name: "PC",
                        type: "line",
                        stack: "PC",
                        data: [],
                    },
                    {
                        name: "App",
                        type: "line",
                        stack: "App",
                        data: [],
                    },
                    {
                        name: "小程序",
                        type: "line",
                        stack: "xcx",
                        data: [],
                    },
                ],
            },

            useractiveList: [],
            useractivepage: {
                currentPage: 1,
                pageSize: 10,
                total: 11,
            },
        };
    },
    watch: {},
    created() {
        let startDate = this.$moment().format("YYYY-MM-DD");
        let endDate = this.$moment().add(0, "days").format("YYYY-MM-DD");
        let monDate = this.$moment().subtract(1, "months").format("YYYY-MM-DD");
        this.selectDate = [monDate, startDate];
    },
    mounted() {
        this.$nextTick(() => {
            this.getuseractivedata();
        });
    },

    props: [],
    methods: {
        // 获取对于时间范围用户活跃数据
        getuseractivedata(e = null) {
          console.log(e);
          this.loading = true
            if (!e)
                var obj = {
                    start_date: this.selectDate[0],
                    end_date: this.selectDate[1],
                };
            else
                var obj = {
                    start_date: e[0],
                    end_date: e[1],
                };
            getuseractivedata(obj).then((res) => {
                this.loading = false
                console.log(res);
                let xData = [];
                let pcData = [];
                let mData = [];
                let appletData = [];
                res.data.data.forEach((val) => {
                    xData.push(val.date);
                    pcData.push(val.pc);
                    mData.push(val.m);
                    appletData.push(val.applet);
                });
                this.lineOpiton.xAxis.data = xData;
                this.lineOpiton.series[0].data = pcData;
                this.lineOpiton.series[1].data = mData;
                this.lineOpiton.series[2].data = appletData;
                console.log(mData);
                this.$echarts
                    .init(document.getElementById("lineVip"))
                    .setOption(this.lineOpiton);
            });
        },


        //表头样式
        headerCell({row, column, rowIndex, columnIndex}) {
            return "header-cell";
        },

        rowCell({row, column, rowIndex, columnIndex}) {
            if (rowIndex % 2 == 0) {
                return "row-cell";
            } else {
                return "row-cells";
            }
        }
    },
};
</script>

<style lang="scss">
@import "@/styles/home.scss";
@import "@/styles/common.scss";

.header-cell {
    color: #61d2f7 !important;
    font-size: 14px;
    font-weight: 600;
    height: 48px;
    background-color: #072951 !important;
    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}

.row-cell {
    color: #fff !important;
    background-color: #072951 !important;
}

.row-cells {
    color: #fff !important;
    background-color: #072951 !important;
    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}

.chart-two {
    display: flex;
    justify-content: space-between;

    .huoye-list {
        width: 49vw;
        margin-right: 1vw;
        padding-top: 57px;
    }
}

.picker-list {
    display: flex;
    align-items: center;
}
</style>
